<!--  -->
<template>
  <div class="login">
    <el-form ref="LoginRef" :model="form" class="myform" :rules="LoginRules">
      <h3>人力资源后台登录系统</h3>
      <el-form-item prop="mobile">
        <el-input v-model="form.mobile" prefix-icon="el-icon-user-solid" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" show-password prefix-icon="el-icon-lock" />
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" class="btn" @click="login">登录</el-button>
      </el-form-item>
      <el-form-item>
        <!-- <el-link href="" target="_blank" class="link">还没有注册？点击立即注册</el-link> -->
        <a href="#" class="link">还没有注册？点击立即注册</a>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import { loginApi } from '@/api/user'
import { mapActions } from 'vuex'
export default
  {
    data () {
      return {
        // 按钮加载效果设置
        loading: false,
        // 表单数据源
        form: {
          mobile: '13800000002',
          password: '123456'
        },
        LoginRules: {
          // 手机号校验
          moblie: [{ required: true, message: '请输入填写手机号', trigger: 'blur' },
          // 自定义校验规则
          {
            validator: (rule, value, callback) => {
              // value:要校验的数据
              // callback：判断校验是否通过
              // 通过callback()
              // 不通过 callback(new Error('错误信息'))
              // 定义正则
              var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              // 判断手机号是否满足正则 value是用户输入的值
              var bool = reg.test(value)
              if (bool) {
                callback()
              } else {
                callback(new Error('手机号不合法！'))
              }
            }, trigger: 'blur'
          }],
          password: [{ required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 6, message: '密码长度为6', trigger: 'blur' }
          ]

        }
      }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created () {
    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted () {
    },
    methods: {
      ...mapActions({
        mylogin: 'user/login'
      }),
      login () {
        this.$refs.LoginRef.validate(async valid => {
          // 返回校验是否通过
          if (valid) {
            // 点击登录后显示加载
            this.loading = true
            // console.log(valid)
            // const res = await loginApi(this.form)
            // console.log(res)
            // 调用vuex中的user模块下的actions中的login方法
            // 但是这里是发送网络请求，因此为了避免出现问题
            // 采取异步方式
            // 添加一个定时器，凸显加载效果
            // 用try { } catch(error) {}来处理错误情况
            setTimeout(async () => {
              try {
                await this.mylogin(this.form)
                // 跳转到主页
                // this.$router.push('/')
                // 判断参数_redirect  是否存在，如果存在就执行登录后，返回原页面
                // 接收参数
                const _redirect = this.$route.query._redirect
                // 判断参数是否存在
                if (_redirect) {
                  // 跳转到之前的页面中
                  this.$router.push(_redirect)
                } else {
                  // 跳转到首页
                  this.$router.push('/')
                }
                // 关闭加载效果
                this.loading = false
                this.$message.success('登录成功')
              } catch (error) {
                // 提示错误
                console.log(error)
                this.$message.error(error.message)
                // 终止loading 停止加载动画
                this.loading = false
              }
            }, 500)

            // console.log(res)
            // 跳转主页
          } else {
            console.log('登录失败')
          }
        })
      }
    }
  }

</script>
<style  lang = 'scss'>
/* @import url(); 引入css类 */
.login {
  background-image: url('../../assets/common/logBg.png');
  background-position: center;
  height: 100%;
  position: relative;

  .myform {
    width: 520px;
    height: 400px;
    // 居中（用定位实现子绝父相）
    position: absolute;
    top: 40%;
    left: 50%;
    // 当移动的数是负数时，在Y轴方向上，相对原来的位置向上移动，在X轴方向上，相对原来的位置向左移动。
    transform: translate(-50%, -50%);
    // 通过让父盒子的内边距向里挤压，使得子盒子变短
    // 也可以直接改el-form-item的宽度
    padding: 0 20px;
    box-sizing: border-box;

    h3 {
      color: white;
      font-size: 48px;
      font-weight: 300;
      text-align: center;
    }

    input.el-input__inner {
      height: 50px;
      background-color: #d4e5ff;
      color: #68b0fe
    }

    .btn {
      // 与父级同宽
      width: 100%;
      height: 55px;
      font-size: 22px;
      background-color: #407ffe;
    }

    .link {
      display: block;
      text-align: center;
      color: white;
    }
  }
}
</style>
